<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./html2canvas.js"></script>
    <style>
        #admin {
            width: 400PX;
            height: 400px;
            background: yellow;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="admin">
        写点文字
    </div>
</body>
<script>
    var admin = document.getElementById("admin")
    html2canvas(admin, {
        dpi: 300,  //解决生产图片模糊
        width: 490, //canvas宽度
        height: 240,//canvas高度
        x: 0, //x坐标
        y: 0, //y坐标
        foreignObjectRendering: true, //是否在浏览器支持的情况下使用ForeignObject渲染
        useCORS: true,  //是否尝试使用CORS从服务器加载图像
        async: false, //是否异步解析和呈现元素
        onrendered:
            function
                (canvas) {
                document.body.appendChild(canvas);
                var pageData = canvas.toDataURL('image/png', 1.0);
                console.log(pageData)
            }
    });

</script>

</html>
